<script setup lang="ts">
import {useRouter,useRoute} from 'vue-router'
import {onActivated, ref} from "vue"
import {deleteClooct, floDetail, potUsrCat, pstClooct} from "../serve"
import {ElMessage} from "element-plus"
const
    route = useRoute(),
    router = useRouter(),
    count = ref(1),
    num = ref(1),
    itemData = ref({sliderImage:[]}),
    load = ref(true),
    userInfoSy = JSON.parse(sessionStorage.getItem('userInfoSy'))
;
function get() {
  if (route.query['id']){
    floDetail(route.query['id']).then(r=>{
      r['sliderImage'] = JSON.parse(r['sliderImage'])
      itemData.value = r
      load.value = false
    }).catch(()=>load.value = false)
  }else {
    router.push('/')
  }
}
// onActivated(get)
get()
setInterval(() => {
  if (count.value == itemData.value['sliderImage'].length) {
    count.value = 1
    return
  }
  count.value++
}, 3000)
function puy() {
  if (!userInfoSy){
    ElMessage({type:'error',message:'请先登录！',duration:1500})
    setTimeout(()=>{
      router.push('/login').catch(()=>true)
    },1000)
    return
  }
  const a = {...itemData.value}
  a['sliderImage'] = []
  a['num'] = num.value + ''
  sessionStorage.setItem('preOrderType','buyNow')
  sessionStorage.setItem('checkoutInfoList',JSON.stringify([a]))
  router.push({path:'/checkout',query:{id:'true'}}).catch(()=>true)
}
function addUsrCatChange() {
  potUsrCat(route.query['id'],1).then(()=>{
    ElMessage({type:'success',message:'添加购物车成功！'})
  })
}
function ClooctChange(f) {
  if (f){
    deleteClooct(route.query['id']).then(()=>{
      ElMessage({type:'success',message:'取消收藏成功！',duration:1500})
      get()
    })
  }else {
    pstClooct(route.query['id']).then(()=>{
      get()
      ElMessage({type:'success',message:'商品收藏成功！',duration:1500})
    })
  }
}

</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <div style="width: 100%;height: 5px;background-color: #F5F5F5;"/>
    <div container>
      <img src="/left-arrow.svg" alt="" style="cursor: pointer;width: 30px;" @click="router.back()">
      <div cr>
        <div lt>
          <div style="font-size: 22px">{{itemData['storeName']}}</div>
          <div pe>
            <div>{{'¥&nbsp;' + itemData['price']}}</div>
            <img src="/mppe.svg" mppe alt="">
            <div style="color:#944101;font-size: 20px;">{{'¥&nbsp;' + itemData['vipPrice']}}</div>
          </div>
          <div synopsis>{{itemData['storeInfo']}}</div>
          <div style="margin-top: 100px;">保价服务，急速退款</div>
          <div l-c>
            <el-input-number v-model="num" :step="1" min="1"/>
            <div l-pbt @click="puy">立即购买</div>
            <div l-pbt style="background-color: #FA9BB6;" @click="addUsrCatChange">加入购物车</div>
            <div l-pt @click="ClooctChange(itemData['isCollect'])">
              <img :src="itemData['isCollect'] ? '/love1.svg' :'/love.svg'" alt=""/>
              <div>添加到收藏夹</div>
            </div>
          </div>
          <div style="margin-top: 30px;">支持全城免费送货</div>
        </div>
        <div rt>
          <div carosello>
            <img :src="itemData['sliderImage'].length == 0 ? '/img.png' : itemData['sliderImage'][count - 1]" alt="">
            <div cerchio>
              <div v-for="i in itemData['sliderImage'].length" :key="i" :class="{bg:i == count}" count style="cursor: pointer" @click="count = i"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<style scoped lang="scss">
[container]{
  margin-left: 60px;
  margin-top: 60px;
}
[cr]{
  display: flex;
  justify-content: space-between;
  margin-left: 80px;
  [lt]{
    [pe]{
      display: flex;
      align-items: center;
      margin: 30px 0;
      [mppe]{
        width: 60px;
        padding-top: 3px;
        margin: 0 5px 0 30px;
      }
    }
    [synopsis] {
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    [l-c]{
      display: flex;
      align-items: center;
      margin-top: 30px;
      [l-pbt]{
        cursor: pointer;
        margin-left: 15px;
        color: #FFFCFC;
        background-color: #E02B16;
        font-size: 14px;
        height: 35px;
        width: 110px;
        text-align: center;
        line-height: 35px;
        letter-spacing: 1px;
        border-radius: 8px;
      }
      [l-pt]{
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-left: 25px;
        font-size: 14px;
        img{
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }
    }
  }
  [rt]{
    flex: 1;
    padding: 0 50px;
    [carosello] {
      text-align: center;
      position: relative;

      img {
        width: 420px;
        height: 420px;
        border-radius: 20px;
      }

      [cerchio] {
        display: flex;
        width: 100%;
        position: absolute;
        justify-content: center;
        align-items: center;
        bottom: 0;
        height: 40px;
      }

      [count] {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #CFD3D2;
        margin-left: 20px;
      }

      .bg {
        background-color: #FA9BB6;
      }
    }
  }
}
</style>